<script setup>
import { defineComponent, ref } from "@vue/runtime-core";
import Footer from "./Footer.vue";
import Sider from "./Sider.vue";
import Header from "./Header.vue";
import MainApp from "../main/MainApp.vue"

import getEventBus from "@utils/eventBus.js";
import {SIDERCHANGE} from "@utils/myConst.js";
const eb = getEventBus();
const siderWidth = ref(200);
eb.on(SIDERCHANGE,"Layout",(val)=>{
  if(!val) {
    siderWidth.value = 200;
  } else {
    siderWidth.value = 50;
  }
})



</script>

<template>
    <div class="dashboard-layout-main-container">
      <el-container>
        <el-aside :width="siderWidth + 'px'">
          <Sider></Sider>
        </el-aside>
        <el-container>
          <el-header style="height: auto;">
            <Header></Header>
          </el-header>
          <el-main>
            <MainApp></MainApp>
          </el-main>  
          <el-footer>
            <Footer></Footer>
          </el-footer>
        </el-container>
      </el-container>
    </div>
</template>



<style lang="scss" scoped>
  .dashboard-layout-main-container {
    min-height: 100%;
  }
</style>